import {useState} from 'react'
import { Modal,message } from 'antd';
import {Button  } from 'react-vant'
import { BrowsingHistoryO } from '@react-vant/icons';
import { useNavigate } from 'react-router-dom';
import zhu from './zhu.module.css'
import axios from '../../../axios/axios'
axios.defaults.baseURL="http://127.0.0.1:3000"

import { LoadingOutlined, PlusOutlined } from '@ant-design/icons';
import { Upload } from 'antd';

//图片验证
const beforeUpload = (file) => {
    const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
    if (!isJpgOrPng) {
      message.error('You can only upload JPG/PNG file!');
    }
    const isLt2M = file.size / 1024 / 1024 < 2;
    if (!isLt2M) {
      message.error('Image must smaller than 2MB!');
    }
    return isJpgOrPng && isLt2M;
  };
let App=()=>{
    let nav =useNavigate()
    let [state,setState]=useState({
        name:'',
        cellPhone:'',
        newPass:'',
        oldPass:'',
        flay:false,
        textstate:false,
        sex:'',
        age:'',
        sjstate:'0',
        pcstate:'0'
    })
    let [bools,setBools]=useState({
        pawd1:false,
        pawd2:false
    })
    const showModal = () => {
        setState({...state,textstate:true})
    };
    const handleOk = () => {
        setState({...state,textstate:false,flay:true})
    };
    const handleCancel = () => {
        setState({...state,textstate:false,flay:false})
    };
    let tologin=async()=>{
        if(state.name.length<=0){message.error('名称不能为空');return false}
        if(state.cellPhone.length<=0){message.error('手机号不能为空');return false}
        if(state.newPass.length<=0){message.error('密码1不能为空');return false}
        if(state.oldPass.length<=0){message.error('密码2不能为空');return false}
        if(state.oldPass!=state.newPass){message.error('两次密码不相同');return false}
        let {data:{code}}=await axios.post('/xin/zhuc',{...state,image:imageUrl})
        if(code==200){
            message.success('注册成功');
            nav('/sjlogin/zhang')
        }else{
            message.error('手机号/账号已被注册')
        }
        
    }

//头像上窜
    const [loading, setLoading] = useState(false);
  const [imageUrl, setImageUrl] = useState();
  const handleChange = (info) => {

    if (info.file.status === 'uploading') {
      console.log(1111);
      setLoading(true);
      return;
    }
    if (info.file.status === 'done') {
      let image=info.file.response.path
      setImageUrl(image);
      setLoading(false);
    }
  };
  const uploadButton = (
    <button
      style={{
        border: 0,
        background: 'none',
      }}
      type="button"
    >
      {loading ? <LoadingOutlined /> : <PlusOutlined />}
      <div
        style={{
          marginTop: 8,
        }}
      >
        选择头像
      </div>
    </button>
  );
    return (
        <>
        <div style={{padding:'0 3rem'}}>
            <div style={{marginTop:'-2rem'}}>
                <Upload
                    name="file"
                    listType="picture-circle"
                    className="avatar-uploader"
                    showUploadList={false}
                    action="http://127.0.0.1:3000/long/upload"
                    beforeUpload={beforeUpload}
                    onChange={handleChange}
                    style={{width:'10rem',height:'10rem',borderRadius:'50%'}}
                >
                    {imageUrl ? (
                    <img
                        src={imageUrl}
                        alt="avatar"
                        style={{
                        width: '100%',
                        height:'100%',
                        borderRadius:'50%'
                        }}
                    />
                    ) : (
                    uploadButton
                    )}
                </Upload>
            </div>
            <div className={`${zhu.zhu_box}`}>
                <p style={{width:'5rem',fontSize:'1rem'}}>姓名:</p>
                <input type="text" placeholder='输入您的姓名' value={state.name} onChange={(e)=>setState({...state,name:e.target.value})} className={`${zhu.input_box}`} />
            </div>
            <div className={`${zhu.zhu_box}`}>
                <p style={{width:'5rem',fontSize:'1rem'}}>手机号:</p>
                <input type="text" placeholder='请输入手机号' value={state.cellPhone} onChange={(e)=>setState({...state,cellPhone:e.target.value})} className={`${zhu.input_box}`}  />
            </div>
            <div className={`${zhu.zhu_box}`}>
                <p style={{width:'5rem',fontSize:'1rem'}}>性别:</p>
                <input type="radio" name='sex' value='男' checked={state.sex === '男'} onChange={(e)=>{setState({...state,sex:e.target.value})}} />男
                <input type="radio" name='sex' value='女' checked={state.sex === '女'} onChange={(e)=>{setState({...state,sex:e.target.value})}}  />女
            </div>
            <div className={`${zhu.zhu_box}`}>
                <p style={{width:'5rem',fontSize:'1rem'}}>年龄:</p>
                <input type="number" placeholder='输入年龄' value={state.age} onChange={(e)=>setState({...state,age:e.target.value})} className={`${zhu.input_box}`}  />
            </div>
            <div className={`${zhu.zhu_box}`}>
                <p style={{width:'5rem',fontSize:'1rem'}}>密码:</p>
                <input type={bools.pawd1?'text':'password'} value={state.newPass} onChange={(e)=>setState({...state,newPass:e.target.value})} placeholder='确认密码' className={`${zhu.input_box}`}  />
                <BrowsingHistoryO onClick={()=>setBools({...bools,pawd1:!bools.pawd1})} style={{display:state.newPass.length>0?'block':'none',fontSize:'2rem'}}/>
            </div>
            <div className={`${zhu.zhu_box}`}>
                <p style={{width:'5rem',fontSize:'1rem'}}>确认密码:</p>
                <input type={bools.pawd2?'text':'password'} value={state.oldPass} onChange={(e)=>setState({...state,oldPass:e.target.value})} placeholder='确认密码' className={`${zhu.input_box}`}  />
                <BrowsingHistoryO onClick={()=>setBools({...bools,pawd2:!bools.pawd2})} style={{display:state.oldPass.length>0?'block':'none',fontSize:'2rem'}}/>
            </div>
            <div className={`${zhu.zhu_box}`}>
                <input type="checkbox" checked={state.flay} onChange={e=>setState({...state,flay:e.target.checked})}/>
                <p style={{fontSize:'1.4rem'}}>已阅读并同意平台 用户协议 和 <span style={{color:'#00f'}} onClick={showModal}>实名条款</span></p>
            </div>
            <div className={`${zhu.zhu_box}`}>
                <Button color='rgb(153,204,51)' style={{width:'30rem'}} disabled={!state.flay} onClick={tologin}>注册</Button>
            </div>
        </div>
            
            <Modal title="Basic Modal" open={state.textstate} onOk={handleOk} onCancel={handleCancel}>
                    <p>用户注册协议</p>
                    <p>尊敬的用户：</p>
                    <p>欢迎您注册使用我们的平台。为确保平台的安全与健康，我们制定了以下用户注册协议。请您在注册之前认真阅读以下条款：</p>
                    <p>禁止内容</p>
                    <p>用户在本平台上禁止发布、传播或参与任何与“黄”、“赌”、“毒”相关的内容或活动。具体包括但不限于：</p>
                    <p>淫秽、色情内容；</p>
                    <p>赌博及相关活动；</p>
                    <p>毒品及毒品相关内容。</p>
                    <p>责任声明</p>
                    <p>用户注册并使用本平台即表示您已充分理解并同意遵守本协议的所有条款。若用户在平台上发布或参与任何禁止内容，将被视为违反本协议，并承担以下后果：</p>
                    <p>用户账号将被永久封禁；</p>
                    <p>用户应独立承担因其行为所引发的所有法律责任，与平台无关。</p>
                    <p>平台权利</p>
                    <p>平台保留随时对用户行为进行监控的权利，并可根据法律法规及平台规章制度采取相应措施，包括但不限于封禁用户账号、暂停或终止相关服务等。</p>
                    <p></p>
                    <p>协议变更</p>
                    <p>本协议的条款可能会不时更新，平台会在网站上公布更新内容。用户有责任定期检查协议的变更情况，继续使用平台即视为接受新协议。</p>
                    <p>感谢您的配合与理解。我们希望您在平台上享有安全、健康的使用体验。</p>
            </Modal>
        </>
    )
}

export default App